import React, { useState } from "react";
import yhTools from "@tools/yh";
import "./style.scss";
/**
 * @msg: 优惠券队列
 * styleType：样式类型 如果券类型couponTypeNo是05就返回styleType=1的样式
 * couponStatus：优惠券状态 0，去使用；1，待激活；2，立即领取 3，已使用 4，已过期  前端定义的与后台没关系，为了展示相关样式
 * key：组件循环索引
 * item: 优惠券列表项 couponUseCondition：描述  满139可用,couponUrl：商品图片url,couponName：卡券名称 小辉付新人券,couponAmount：优惠券金额 55, couponTerm：时间,couponUseDesc:详情,userScene:标签，线上-》配送专享，线下-》到店专享
 * index:数组索引，
 * couponArray：优惠券列表数组
 * receive: 领取按钮事件,
 * notUse:不使用,
 * @param {*} props
 * @return {*}
 */
function CouponItem(props) {
	const btnText = {
		0: "去使用",
		1: "待激活",
		2: "立即领取"
	};
	const [isShowArr, set_isShowArr] = useState(props.couponArray);

	/**
	 * @msg: 券详情展示
	 * @return {*}
	 */
	function couponDetailShow() {
		//	isShow：是否展示详情,
		let isShow = isShowArr[props.index].isShow;
		isShowArr[props.index].isShow = !isShow;
		set_isShowArr(isShowArr.slice());
	}

	return (
		<div className="component-couponItem">
			<div
				className={
					"couponItem-content " +
					(isShowArr[props.index].isShow ? "" : " couponItem-content2")
				}
			>
				<div className="content-msg ui-flex ui-flex-align-center">
					<div className="msg-describe ui-flex ui-flex-align-center">
						{props.styleType === "1" ? (
							<div
								className={
									"describe-discount ui-flex ui-flex-column ui-flex-align-center ui-flex-justify-center c-fff" +
									(["3", "4"].includes(props.couponStatus)
										? " describe-discount2"
										: "")
								}
							>
								<div className="discount-money">
									<i className="money-i f-36 f-b">¥</i>
									<span className="money-num f-64 f-b">
										{/*优惠券金额 55 */}
										{props.item.couponAmount || ""}
									</span>
								</div>
								<div className="discount-tips">
									{/*描述  满139可用 */}
									{props.item.couponUseCondition || ""}
								</div>
							</div>
						) : (
							<div className="describe-pic">
								{/* 商品图片url*/}
								<img
									className="describe-img"
									src={props.item.couponUrl || ""}
								/>
							</div>
						)}
					</div>
					<div className="msg-explain ui-flex ui-flex-column">
						<div className="explain-word ui-flex ui-flex-align-center">
							{props.styleType !== "1" && (
								<div
									className={
										"word-hot" +
										(["3", "4"].includes(props.couponStatus)
											? " word-hot2"
											: "")
									}
								>
									<span className="hot-text f-20">
										{/* 标签，线上-》配送专享，线下-》到店专享 */}
										{props.item.userScene === "0" ? "配送专享" : "到店专享"}
									</span>
								</div>
							)}
							<div
								className={
									"word-name f-32 f-b ui-col" +
									(["3", "4"].includes(props.couponStatus) ? " word-name2" : "")
								}
							>
								{/* 卡券名称 小辉付新人券*/}
								{props.item.couponName || ""}
							</div>
						</div>
						<div className="explain-b ui-flex ui-flex-justify-space-between ui-flex-align-center">
							<div
								className={
									"explain-tips f-24 c-666" +
									(["3", "4"].includes(props.couponStatus)
										? " explain-tips2"
										: "")
								}
							>
								{props.styleType !== "1" ? (
									<div
										className={
											"tips-money ui-flex ui-flex-align-end" +
											(["3", "4"].includes(props.couponStatus)
												? " tips-money2"
												: "")
										}
									>
										<div className="money-l ui-flex ui-flex-align-end">
											<strong
												className={
													"money-num f-44" +
													(["3", "4"].includes(props.couponStatus)
														? " money-num2"
														: "")
												}
											>
												{/*优惠券金额 55 */}
												{props.item.couponAmount || ""}
											</strong>
											<span className="money-text f-24">元</span>
										</div>
										{/*描述  满139可用 */}
										<div className="money-r f-24">
											{props.item.couponUseCondition || ""}
										</div>
									</div>
								) : (
									``
								)}
							</div>
							{!props.notUse ? (
								["0", "1", "2"].includes(props.couponStatus) ? (
									<div
										className={
											"explain-btn ui-flex ui-flex-justify-center ui-flex-align-center " +
											(props.couponStatus !== "2" ? " explain-btn-active" : "")
										}
										onClick={() => {
											props.receive &&
												yhTools.debounceNew(props.receive(), 200);
										}}
									>
										<span className="btn-text f-22">
											{/* 按钮文案 */}
											{btnText[props.couponStatus]}
										</span>
									</div>
								) : (
									<div
										className={
											"explain-btn2" +
											(["4"].includes(props.couponStatus)
												? " explain-btn3"
												: "")
										}
									></div>
								)
							) : (
								""
							)}
						</div>
					</div>
				</div>
				<div className="content-detail">
					<div className="detail-t ui-flex ui-flex-justify-space-between">
						<div
							className={
								"detail-t-date f-24" +
								(["3", "4"].includes(props.couponStatus)
									? " detail-t-date2"
									: "")
							}
						>
							{/*时间 2021-05-26至2021-07-31  */}
							{props.item.couponTerm || ""}
						</div>
						<div
							className="detail-t-btn ui-flex ui-flex-align-center"
							onClick={() => {
								couponDetailShow();
							}}
						>
							<span className="btn-text f-24 c-666">详情</span>
							<i
								className={
									"btn-icon " +
									(isShowArr[props.index].isShow ? "btn-icon-show" : "")
								}
							></i>
						</div>
					</div>
				</div>
			</div>
			<div
				className={
					"couponItem-describe f-24 " +
					(isShowArr[props.index].isShow ? "" : "couponItem-describe-no-show")
				}
			>
				{/*优惠券详情 */}
				{props.item.couponUseDesc || ""}
			</div>
		</div>
	);
}

export default CouponItem;
